<template>
    <div>
        <el-form :model="formData" inline="true" ref="formData"
                 class="demo-form-inline" style="margin-left: 100px" labelWidth="100px">
            <el-row style="margin-top: 20px;">
                <el-col>
                    <el-form-item label="会员姓名">
                        <el-input size="mini" v-model="formData.name"  v-bind:style="commonstyle" placeholder="必填"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row style="">
                <el-col>
                    <el-form-item label="会员性别">
                        <el-select size="mini" v-model="formData.sex" v-bind:style="commonstyle" placeholder="请选择性别">
                            <el-option
                                v-for="item in sexList"
                                :key="item.type"
                                :label="item.name"
                                :value="item.type">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row style="">
                <el-col>
                    <el-form-item label="归属会员">
                        <el-select size="mini" v-model="formData.sex" v-bind:style="commonstyle" placeholder="请选择性别">
                            <el-option
                                v-for="item in sexList"
                                :key="item.type"
                                :label="item.name"
                                :value="item.type">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row style="">
            </el-row>

            <el-row style="">
                <el-col>
                    <el-form-item label="手机号码 ">
                        <el-input size="mini" v-model="formData.thecard" v-bind:style="commonstyle"
                                  placeholder="必填"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row style="">
                <el-col>
                    <el-form-item label="身份证号 ">
                        <el-input size="mini" v-model="formData.thecard" v-bind:style="commonstyle"
                                  placeholder="必填"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row style="">
                <el-col>
                    <el-form-item label="会员备注">
                        <el-input size="mini" v-model="formData.comments" v-bind:style="commonstyle"
                                  placeholder=""></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <el-button type="primary" style="margin-left: 200px" @click="submitForm(this.opertype)">提交<i
                        class="el-icon-upload el-icon--right"></i></el-button>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>
<script>
    import {mapActions, mapState,mapMutations, mapGetters} from 'vuex'
    import {addEmployee,getRuleList,employeeDetail,updateEmployee} from '@/api/getData'

    export default {
        data() {
            return {
                opertype:'add',
                isIndeterminate:true,
                checkAll: false,
                leftmenu:2,
                selectMenuList: [{id: 1, name: "默认根据职务设定"}, {id: 2, name: "手工选择"}],
                menudisabled:false,
                commonstyle: {
                    width: '300px',
                },
                value: '',
                formData: {
                    id:'',
                    sex:'',
                    rules:[],
                    schoolidarray:[],
                    name: '',
                    subjectno: 0,
                    firsttel:'',
                    sectel:'',
                    birthday:'',
                    address:'',
                    duty:'',
                    status:'',
                    thecard:'',
                    theno:'',
                    bankcard:'',
                    comments:'',
                    belongschoolid: 0,
                }
            }
        }
        ,
        mounted() {
            this.formData.id = this.$route.query.id;
            if(this.formData.id!=null)
                this.opertype="modify";
            if((this.opertype=="modify")){
                this.initData();
            }


            if(this.ruleList==null){
                this.getRules();
            }
            if(this.schoolList==null){
                this.getAllSchool();

            }

        }
        ,
        methods: {
            ...mapActions(['getGiftList', 'getPeriod', 'setEmpschool', 'deleteEmpschool', 'fillSchoolEmps', 'getAllSchool']),
            ...mapMutations(['setRuleList']),
            async getRules(){
                const res=await getRuleList({'data':{}});
                if(res!=null){
                    this.setRuleList(res.data);

                }
            },
            async initData(){
                const res=await employeeDetail({'data':{'id':this.formData.id}});
                if(res.success==true){
                    this.formData=res.data;
                }
            },
            handleCheckAllChange(val) {
                if(val===true){
                    var temp=[];
                    this.ruleList.forEach((item)=>{
                        temp.push(item.id)
                    });
                    this.formData.rules=temp;
                }
                else{
                    this.formData.rules=[];
                }
                this.isIndeterminate = false;
            },
            handleCheckedChange(value) {
                let checkedCount = this.formData.rules.length;
                this.checkAll = checkedCount === this.ruleList.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.ruleList.length;
            },


            rulechange(key){
                if(key==2){
                    this.menudisabled=false;
                }
                else{
                    this.menudisabled=true;
                }

            },

            async updateFrom(){
                try {
                    // alert(JSON.stringify(this.formData));
                    var data = {"data": this.formData}
                    let result = await updateEmployee(data);
                    if (result.success == true) {
                        this.$message({
                            type: 'success',
                            message: '修改成功'
                        });

                    }
                } catch (err) {
                    console.log(err);
                }

            },


            async submitForm(formName) {
                try {
                    if((this.opertype=="modify")){
                        this.updateFrom();
                        return;
                    }


                    // alert(JSON.stringify(this.formData));
                    var data = {"data": this.formData}
                    let result = await addEmployee(data);
                    if (result.success == true) {
                        this.$message({
                            type: 'success',
                            message: '添加成功'
                        });
                        this.formData = {
                            id:'',
                            sex:'',
                            rules:[],
                            schoolidarray:[],
                            name: '',
                            subjectno: 0,
                            firsttel:'',
                            sectel:'',
                            birthday:'',
                            address:'',
                            duty:'',
                            status:'',
                            thecard:'',
                            theno:'',
                            bankcard:'',
                            comments:'',
                            belongschoolid: 0,
                        }
                        this.fillSchoolEmps(true);
                    }
                } catch (err) {
                    console.log(err);
                }
            }
        }
        ,
        computed: {
            ...
                mapGetters(['schoolList', 'sexList', 'dutyList', 'workStatusList', 'ruleList'])
        }
        ,
    }

</script>

<style lang="less">
    .el-form-item {
        margin-bottom: 5px;
    }

    .el-form-item__label {
        width: 120px;
        text-align: right;
    }
</style>
